<!-- 首页V2 -->
<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="swiper">
      <el-carousel height="400px">
        <el-carousel-item v-for="item in 4" :key="item">
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            src="../assets/img/home/u13.png"
            alt=""
            srcset=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 新闻 -->
    <el-row class="news wrap" :gutter="20">
      <el-col class="news-left" :span="6" :xs="24">
        <div class="news-left-wrap">
          <el-carousel height="300px" indicator-position="none">
            <el-carousel-item v-for="item in 4" :key="item">
              <img
                style="width: 100%; height: 100%; object-fit: cover"
                src="../assets/img/home/u13.png"
                alt=""
                srcset=""
              />
            </el-carousel-item>
          </el-carousel>

          <div class="news-left-wrap-ind">
            <div v-for="item in 4" :key="item" class="NLWI-item"></div>
          </div></div>
      </el-col>
      <el-col class="news-center" :span="12" :xs="24">
        <div class="news-center-wrap">
          <div class="news-center-wrap-tit">
            <el-tabs v-model="newTabsActive">
              <el-tab-pane label="集团要闻" name="first"></el-tab-pane>
              <el-tab-pane label="成员动态" name="second"></el-tab-pane>
              <el-tab-pane label="生产经营动态" name="third"></el-tab-pane>
              <el-tab-pane label="党建动态" name="fourth"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="news-center-wrap-con">
            <div class="NCWC-tit">集团与特级民企战略合作首批集中签约</div>
            <div class="NCWC-des">
              11月15日下午，集团与特级民企战略合作首批集中签约仪式在杭州举行。此次集中签约，是集团深入学习贯得省委近期会议精神的有力举措，是集团实施”浙建
            </div>
            <el-scrollbar class="NCWC-list">
              <div>
                <div class="NCWC-list-item" v-for="item in 10" :key="item">
                  <div class="NCWC-list-item-icon"></div>
                  <div class="NCWC-list-item-con">
                    学习强国、浙江工人日报等多家媒体集中报道集团承办的省级
                  </div>
                  <span class="NCWC-list-item-time">2024-11-14</span>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </el-col>
      <el-col class="news-right" :span="6" :xs="24">
        <div class="news-right-wrap">
          <div class="news-right-wrap-tit">
            <el-tabs v-model="newTabsActive">
              <el-tab-pane label="核心成员单位" name="first"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 广告 -->
    <div class="public wrap"></div>
    <!-- 案例 -->
    <el-row class="case wrap" :gutter="20">
      <el-col class="case-left" :span="5" :xs="24"></el-col>
      <el-col class="case-right" :span="19" :xs="24"></el-col>
    </el-row>
    <!-- 链接 -->
    <div class="links wrap">
      <div class="links-tit"></div>
      <div class="links-con">
        <el-row :gutter="20">
          <el-col class="links-center" :span="24"></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  name: "Home",
  data() {
    return {
      /**新闻轮播 */
      carouselIndex: 0, //新闻轮播下标
      newTabsActive: "User",
    };
  },
  methods: {},
};
</script>

<style lang='css' scoped>
.wrap {
  max-width: 1300px;
  margin: 10px auto 0 !important;
}

/**轮播图 */
.swiper {
  margin: auto;
  overflow: hidden;
}

/**新闻 */
.news {
}

.news-left {
  height: 300px;
}

.news-left-wrap {
  position: relative;
}

/**指示器 */
.news-left-wrap-ind {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 9;
  display: flex;
}

.NLWI-item {
  width: 10px;
  height: 10px;
  background-color: #fff;
  margin-left: 5px;
}

.NLWI-item_active {
  background-color: rgb(255, 204, 0);
}

.news-center {
  height: 300px;
}

.news-center-wrap {
  padding: 0 20px;
  box-sizing: border-box;
  height: 100%;
}

.news-center-wrap-con {
  height: calc(100% - 54px);
  display: flex;
  flex-direction: column;
}

.NCWC-tit {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.NCWC-des {
  margin-top: 5px;
  text-indent: 2em;
  line-height: 25px;
  color: #686868;
  height: 50px;
  overflow: hidden;
}

.NCWC-list {
  margin-top: 5px;
  height: calc(100% - 80px);
  overflow: hidden;
}

.NCWC-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.NCWC-list-item-icon {
  width: 7px;
  height: 7px;
  background-color: rgb(73, 73, 73);
}

.NCWC-list-item-con {
  margin-left: 10px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.NCWC-list-item-time {
  width: 80px;
  text-align: right;
}

.news-right {
  height: 300px;
}

/**广告 */
.public {
  max-width: 1300px;
  margin-top: 10px;
  height: 150px;
  background-color: aqua;
}

/**案例 */
.case {
  margin-top: 10px;
}

.case-left {
  height: 300px;
  background-color: aquamarine;
}

.case-right {
  height: 300px;
  background-color: rgb(77, 166, 136);
}

/**链接 */
.links {
  height: 100px;
}

.links-tit {
  height: 30px;
  background-color: blanchedalmond;
}

.links-con {
  height: 50px;
  background-color: beige;
}

.links-center {
  height: 100%;
  background-color: beige;
}
</style>

<style>
/**走马灯按钮样式调整 */
.el-carousel__button {
  height: 5px !important;
  opacity: 1;
}

.is-active .el-carousel__button {
  height: 5px !important;
  background-color: var(--theme-color) !important;
}

/**栅格布局边距修改 */
.el-col {
  padding: 0 !important;
}

/**tabs样式调整 */
.el-tabs__active-bar {
}

.NCWC-list .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>